<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp-websocket/2.3.3/stomp.min.js"></script>
</head>
<body>
<script type="text/javascript">
    var socket = new SockJS('/ws');
    var stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/messages', function (message) {
            console.log('Received: ' + JSON.parse(message.body).content);
        });
    });

    function sendMessage() {
        var content = document.getElementById('message').value;
        stompClient.send("/app/message", {}, JSON.stringify({'content': content}));
    }
</script>

<input id="message" placeholder="Type your message here..." type="text">
<button onclick="sendMessage()">Send</button>
</body>
</html>